JQuery dialog close on click outside with example

In this article, I will show you how to close the jQuery ui dialog on click elsewhere on the page. You can specify animated effect for the dialog to hide/ show properties.

Normally dialog has close button, if you want to close the dialog popup by clicking the close button. Below example makes an easy click anywhere on the page dialog will close.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#opener").click(function () {
            $("#dialog2").dialog('open');
        });
 
        $("#dialog2").dialog({
            modal: true,
            autoOpen: false,
            title: "jQuery Dialog",
            hide: { effect: 'drop', duration: 250 },
            show: { effect: 'fade', duration: 500 },
            resizable: false, draggable: false,
            width: 'auto', dialogClass: 'fixed-dialog',
            open: function (event, ui) {
                $('.ui-widget-overlay').bind('click', function () {
                    $("#dialog2").dialog('close');
                });
            }
        });
    });
 
</script>
<button id="opener">open the dialog</button>
<div id="dialog2" align="center" hidden="hidden">
    <div class="body">
        Jquery UI dialogs automatically closewhen you click elsewhere on the page.    
    </div>
</div> 

jQuery ui dialog example: